

$faint-white: rgba(255, 255, 255, .38);

$visible-width: 6%;
$empty-width: 100 - $visible-width;
$form-width: 70%;
$bg-color: rgba(227, 227, 227, .08);


#dimmed-bg {
    height: 100vh;
    width: 100%;
    position: fixed;
    background-color: rgba(20, 20, 20, .86);
    top: 0;
    left: 0;
    transition: all .6s;
    transform: translateX(-120vw);
    visibility: hidden;
}


#full-site {
    visibility: hidden;
    overflow: hidden;
    max-height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


#above-fold {
    position: relative;
    z-index: 12;
    color: white;
    padding-left: 92px;
    padding-top: 62px;
    box-sizing: border-box;
    width: $empty-width;
    height: 100vh;
    display: inline-block;
    opacity: 0;
    transition: all 1s .5s;
    
    nav {
        display: inline-block;
        border-bottom: 1px solid $faint-white;
        padding-bottom: px-to-rem(18px);
        padding-right: px-to-rem(72px);
        
        li {
            display: inline-block;
            padding: 0 px-to-rem(30px);
        }
        
        li:first-child { padding-left: 0; }
        
        a {
            transition: opacity .1s;
            
            &:hover {
                opacity: .8;
            }
            
        }
    }
    
    article {
        margin-top: px-to-rem(204px);
        
        h1 {
            font-size: px-to-rem(36px);
        }
        
        p {
            margin: px-to-rem(48px) 0;
            width: px-to-rem(640px);
            line-height: 200%;
        }
        
        button {
            background-color: #404040;
            color: #e8fff7;
            padding: .8em 1.4em;
            padding-right: 16em;
            transition: opacity .2s;
            
            &:hover {
                opacity: .6;
            }
        }
        
        
        
    }
    
}


#register-side-bar {
    
    $side-bar-trans-time: .6s;
    $side-bar-trans-delay: 1s;
    
    width: $empty-width + $visible-width + $form-width;
    display: flex;
    position: absolute;
    transition: all $side-bar-trans-time $side-bar-trans-delay;
    transform: translateX(200px);
    
    
    #empty-section {
        width: $empty-width;
        height: 100vh;
    }
    
    #visible-section {
        width: $visible-width;
        height: 100vh;
        background-color: $bg-color;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        color: #b3b3b3;
        font-size: px-to-rem(18px);
        transition: opacity 1.4s;
        
        span {
            writing-mode: vertical-rl;
            text-orientation: upright;
            margin: 8vh 0;
            transition: opacity .6s;
            
            i {
                font-size: px-to-rem(24px);
                margin-bottom: px-to-rem(14px);
            }
        }
        
        h4 {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: opacity .6s;
        }
    }
    
    #form-section {
        background-color: $bg-color;
        height: 100vh;
        box-sizing: border-box;
        width: $form-width;
        color: white;
        padding-top: 30vh;
        
        h2 {
            font-size: px-to-rem(30px);
            margin-bottom: px-to-rem(52px);
        }
        
        input:not([type="submit"]) {
            display: block;
            background-color: transparent;
            border-bottom: 1px solid rgba(255, 255, 255, .8);
            margin: px-to-rem(50px) 0;
            padding: 6px 18px;
        }
        
        input[type="submit"] {
            background-color: white;
            color: #292929;
            padding: .4em 5.4em;
            border-radius: 4px;
            margin-left: 8px;
            margin-bottom: px-to-rem(66px);
            transition: all .3s;
            
            &:hover {
                opacity: .8;
                transform: scale(1.1);
            }
        }
        
        ::placeholder { color: inherit; }
        
        a {
            color: #b29dff;
            &:hover { opacity: .7; }
        }
    }
}







